<!-- 选择贝壳 -->
<template>
	<view class="container">
		<view class="now-have">
			<view class="name">当前拥有{{shellName}}数量</view>
			<text class="now-num">{{nowHaveShell}}</text>
		</view>
		<view class="numbers">
			<view class="name">选择数量</view>
			<view class="input-box">
				<input type="digit" v-model="exchangeNum" placeholder-style="font-size:30rpx;font-weight:normal"
				 placeholder="请输入选择数量" />
				<view class="all-exchange" @tap="allExchange">全部选择</view>
			</view>
			<view class="number-tips">
				选择成功后，还剩余{{Number(remaining).toFixed(2)}}
			</view>
		</view>
		<view class="type-box">
			<view class="meaningless">
				<view class="title">
					<text class="name">需选择贝壳类型</text>
					<text class="changeRule" @tap="navTo('/pages/center/help/rulesDetail?id=12&tit=选择说明')">选择说明</text>
				</view>


				<view class="box">
					<view @tap="switchType(item,index)" v-if="index !== 0" v-for="(item,index) in shellList" :key="index" :class="[indexType==index ? 'selects' : '','item']"
					 :data-item="item" :data-index="index">
						<view>
							<image :src="item.image" mode="aspectFill"></image>
							<text>{{item.name}}</text>
						</view>
						<!-- {{item.valid_days}}个月 -->
					</view>
				</view>
			</view>

		</view>
		<view class="result">
			<view class="bar">
				<view class="bar-name">预计到期获得数量</view>
				<view>{{Number(exchangedNum).toFixed(2) }}</view>
			</view>
			<view class="fee" v-if="indexType">兑换{{exchangeName}}手续费{{exchange_tax}}%</view>
		</view>
		<view class="submit-btn" @tap="exchangeSub">提交</view>
	</view>
</template>

<script>
	import {
		shellList,
		shellExchange
	} from "@/api/shell.js"
	import utils from '@/common/utils.js'
	export default {
		components: {},
		data() {
			return {
				shell_id: '',
				shellName: '', //当前的贝壳名称
				ruleChecked: true, //贝壳服务协议同意切换
				nowHaveShell: 0, // 拥有当前种类贝壳
				exchangeNum: null, // 输入的兑换数量
				exchangeName: '',// 兑换的贝壳名称
				exchangedNum: 0, // 到期获得数量
				remaining: 0, //兑换后还剩余的当前贝壳数量
				proportion: null, //贝壳兑换利率
				exchange_rate: null,//
				shellList: [],//贝壳数据
				indexType: 0, // 贝壳切换索引
				to_shell_id: null, //兑换的贝壳ID
				exchange_tax: '', //兑换手续费
			}
		},
		onLoad(option) {
			this.shell_id = option.id
			shellList().then(res => {
				this.shellList = res.data.shell_list
				this.shellList.forEach((item,index) => {
					if (item.id == option.id) {
						if (item.id == 1) {
							this.nowHaveShell = item.count
						} else {
							this.nowHaveShell = item.diesVenit
						}
						
						this.remaining = item.count;
						this.shellName = item.name
					}
				})
			});
		},
		watch: {
			exchangeNum: {
				deep: true,
				handler(val, oldval) {
					this.blur();
				}
			}
		},
		methods: {
			ruleCheck() {
				this.ruleChecked = !this.ruleChecked
			},
			goRule(id, name) {
				uni.navigateTo({
					url: `/pages/center/help/rulesDetail?id=${id}&tit=${name}`
				})
			},
			blur() {
				this.$nextTick(function(){
					this.exchangeNum = utils.verifyNum(this.exchangeNum)
				})
				if (Number(this.exchangeNum) > Number(this.nowHaveShell)) {
					this.$nextTick(function(){
						this.exchangeNum = this.nowHaveShell
					})
				}
				if (this.proportion) {
					this.$nextTick(function(){
						this.exchangedNum = this.exchangeNum * Number(this.exchange_rate) * Number(this.proportion)*(1-Number(this.exchange_tax)/100);
					})
				}
				this.remaining = (Number(this.nowHaveShell) - Number(this.exchangeNum)).toFixed(2)
			},
			switchType(item,index) { //切换类型
				let data = item;
				this.indexType = index;
				this.to_shell_id = data.id
				this.proportion = data.shell_rate
				this.exchange_rate = data.exchange_rate
				this.exchangeName = data.name
				this.exchange_tax = Number(data.exchange_tax)*100
				this.exchangedNum = this.exchangeNum * Number(this.exchange_rate) * Number(this.proportion)*(1-Number(data.exchange_tax));
			},
			exchangeSub() {
				if (!this.exchangeNum) {
					return uni.showToast({
						title: "请输入选择数量",
						icon: "none"
					})
				}
				if (!this.to_shell_id) {
					return uni.showToast({
						title: "请选择贝壳类型",
						icon: "none"
					})
				}
				uni.showLoading({
					mask:true
				})
				let data = {
					shell_id: this.shell_id,
					to_shell_id: this.to_shell_id,
					num: this.exchangeNum
				}
				shellExchange(data).then(res => {
					uni.hideLoading()
					uni.showToast({
						icon:'none',
						title:res.data.msg
					})
					let _this = this
					setTimeout(function () {
					    uni.redirectTo({
					    	url: '/pages/center/shell/shell?id=' + _this.to_shell_id
					    })
					}, 1000)
				})
			},
			allExchange() {
				this.exchangeNum = this.nowHaveShell;
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		border-top: 20rpx solid #eee;

		.now-have,
		.numbers,
		.type-box {
			margin: 30rpx 0;

			.name {
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}

			.now-num {
				font-size: 60rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}
		}

		.now-have {
			width: 85%;
			margin: 20rpx auto;
			border-bottom: 1px solid #EEEEEE;

		}

		.numbers {
			width: 85%;
			margin: auto;

			.input-box {
				position: relative;

				input {
					font-size: 60rpx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
					width: 100%;
					height: 80rpx;
					border-bottom: 1px solid #EEEEEE;
				}

				.all-exchange {
					color: #57BE6A;
					font-size: 24rpx;
					font-weight: 400;
					position: absolute;
					right: 0;
					bottom: 0;
					font-size: 26rpx;
					border-radius: 5px;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 10rpx;
					z-index: 2;
				}
			}

			.number-tips {
				font-size: 24rpx;
				margin-top: 8rpx;
				color: rgba(153, 153, 153, 1);
			}
		}

		.type-box {
			border-top: 10px solid #EEEEEE;
			border-bottom: 10px solid #EEEEEE;
			padding: 10px 0;

			.meaningless {
				width: 85%;
				margin: auto;
			}

			.title {
				display: flex;
				justify-content: space-between;

				text:nth-of-type(2) {
					padding: 0 10rpx;
					font-size: 26rpx;
					color: $theme-color;
				}
			}

			.box {
				padding: 20rpx 0;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;

				.item {
					text-align: center;
					border-radius: 8rpx;
					padding: 24rpx 30rpx;
					font-size: 24rpx;
					color: #999999;
					border: 1px solid #EEEEEE;

					image {
						width: 30rpx;
						height: 20rpx;
						margin-right: 6rpx;
					}

					text {
						color: #333333;

					}
				}

				.selects {
					box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(51, 51, 51, 0.2);
					border: none;
				}
			}
		}

		.result {
			width: 90%;
			margin: 20rpx auto 0;
			color: rgba(51, 51, 51, 1);
			font-size: 24rpx;

			.bar {
				display: flex;
				justify-content: space-between;
				border-bottom: 2px solid #EEEEEE;
				padding: 20rpx;

				.bar-name {
					// padding-left: 20rpx;
				}
			}
			.fee{
				padding: 20rpx;
				font-size: 20rpx;
				color: #999;
			}
		}

		.submit-btn {
			box-sizing: border-box;
			width: 690rpx;
			margin: 100rpx auto 0;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			background: rgba(87, 190, 106, 1);
			border-radius: 40px;
			font-size: 32rpx;
			font-weight: bold;
			color: white;
		}

	}
</style>
